<template>
  <div class="box h-85">
    <div class="left">
      <div>
        <div v-for="item in itemList" :key="item.code" class="nav" :class="{on: item.index === typeCode}" @click="changeNav(item.index)">
          <img :src="item.url" alt="">
          <div class="navchild">
            <p>{{ item.name }}</p>
            <div>
              <span>{{ item.count }}</span>
              <small>个</small>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="right">
      <el-table :data="tableData2" class="el-table1">

        <el-table-column
          type="index"
          label="序号"
          width="200"
        />
        <el-table-column
          prop="fileName"
          label="文件名称"
        />
        <el-table-column
          prop="fileType.name"
          label="文件类型"
        />
        <el-table-column
          prop="time"
          label="发布人"
        />

        <el-table-column
          prop="type"
          label="发布时间"
          width="250"
        />
      </el-table>

      <vueSeamlessScroll class="seamless-warp" :data="tableData.length>15? tableData:''">
        <el-table
          ref="table"
          :data="tableData"
          style="width: 100%"
          class="el-table2"
        >

          <el-table-column
            type="index"
            width="200"
          />

          <el-table-column
            prop="fileName"
          />
          <el-table-column
            prop="fileType.name"
          />

          <el-table-column
            prop="publisher"
          />
          <el-table-column
            prop="releaseTime"
            width="250"
          />

        </el-table>
      </vueSeamlessScroll>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import { getTechnologyData, checkTypeStatistical } from '@/api/connector'
export default {
  name: 'TechnicalData',
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      typeCode: 0,
      itemList: [],
      tableData2: [],
      tableData: []
    }
  },
  computed: {
    currentCode() {
      return this.itemList.find(item => item.index === this.typeCode).code
    }
  },
  created() {
    this.getNavs()
  },
  methods: {
    // 侧边导航切换
    changeNav(index) {
      this.typeCode = index
      this.getList()
    },
    // 获取侧边栏
    async getNavs() {
      checkTypeStatistical({ type: 1 }).then(res => {
        if (res.status === 0) {
          const itemList = []
          const datas = res.data.rows
          datas.forEach((ele, index) => {
            const obj = {}
            obj.name = ele.name
            obj.code = ele.code
            obj.count = ele.count
            obj.index = index
            obj.url = require(`@/assets/sheep/z${index + 1}.png`)
            itemList.push(obj)
          })
          this.itemList = itemList
        }
      }).then(() => {
        this.getList()
      })
    },
    // 获取列表
    getList() {
      this.tableData = []
      getTechnologyData({ page: 1, perPage: 1000, type: 1, fileTypeCode: this.currentCode }).then(res => {
        if (res.status === 0) {
          res.data.rows.forEach(ele => {
            const index = ele.releaseTime.lastIndexOf(' ')
            ele.releaseTime = ele.releaseTime.toString().substring(0, index)
          })
          this.tableData = res.data.rows
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
::v-deep .el-table2 .el-table__header-wrapper{
  display: none;
}
::v-deep .el-table.el-table2{
  border-top:none;
}
::v-deep .el-table.el-table1{
  border-bottom: none;
}
::v-deep .el-table1 .el-table__body-wrapper{
  display: none;
}
::v-deep .el-table1 th{
  border-bottom: none;
}
 .seamless-warp {
        height: 95%;
        overflow: hidden;
    }
::v-deep .el-table{
  background: none;
  color: #fff;
  border: 1px solid #155277;
}
.el-table::before{
  background: #155277 ;

}
::v-deep .el-table th{
  background: rgba(21, 82, 119, 0.3);
  color: #fff;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
}
::v-deep .el-table th:first-of-type{
  text-align: center;
}
::v-deep .el-table td:first-child{
  text-align: center;

}
::v-deep .el-table th {border: none}
::v-deep .el-table tr{
  background-color: rgba(0,0,0,0);
  height: 48px;
}
::v-deep .el-table td{
    border-bottom: 1px solid #155277;
    border-top: 1px solid #155277;

}

::v-deep .el-table tr:hover td {
	background-color: rgba(0,0,0,0);

}
::v-deep .el-table__body tr.current-row > td{
  background-color: rgba(0,0,0,0);
}
.left{
  width: 280px;
  height: 100%;
  float: left;
  border: 2px solid;
  display: flex;
  flex-direction: column;
  border-image: linear-gradient(277deg, rgba(43, 114, 158, 0.15), rgba(65, 139, 184, 1), rgba(21, 82, 119, 0.13)) 2 2;
  .nav{
    width: 100%;
    height: 113px;
    padding: 35px 75px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #2E5675;
    .navchild{
      p{
        font-size: 14px;
        color: #E9F7FF;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
      }
      div{
        margin-top: 10px;
        display: flex;
        align-items: flex-end;
        span{
          font-size: 32px;
          margin-right: 10px;
          text-shadow: 0px 1px 12px rgba(6, 80, 184, 0.41);
          background: linear-gradient(180deg, #FFFFFF 0%, #3CB5FF 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          font-weight: 500;
        }
        small{
          color: #BCDDF2;
          font-size: 14px;
          margin-bottom: 6px;
        }
      }
    }
    img{
      width: 30px;
      height: 30px;
      margin-right: 20px;
    }
  }
  .nav.on{
    background: #17354D;
    color: #17354D;
    border-image: linear-gradient(90deg, rgba(60, 181, 255, 0), rgba(60, 181, 255, 1), rgba(60, 181, 255, 0)) 2 2;
  }
}
.right{
  width: 83.5%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  float: right;
  background: linear-gradient(90deg, rgba(36, 58, 86, 0.19) 0%, rgba(21, 82, 119, 0) 100%);
  border: 2px solid;
  border-image: linear-gradient(277deg, rgba(43, 114, 158, 0.15), rgba(65, 139, 184, 1), rgba(21, 82, 119, 0.13)) 2 2;

}
.h-85{
  margin-top: 3vh;
  height: 85vh;
}

</style>
